<template>
  <base-layout title="商品详情">
    <view class="content">
      <!-- 商品图片轮播 -->
      <swiper 
        class="product-swiper" 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="500"
        :indicator-color="'rgba(255, 255, 255, 0.6)'"
        :indicator-active-color="'#ff4d4f'"
      >
        <swiper-item v-for="(image, index) in productImages" :key="index">
          <view class="swiper-item-wrapper">
            <image 
              :src="`${$minApi.imgOrigin}${image}`" 
              mode="aspectFit"
              class="swiper-image" 
            />
          </view>
        </swiper-item>
      </swiper>

      <!-- 商品基本信息 -->
      <view class="basic-info">
        <view class="title">
          <text class="hot-tag" v-if="product.isHot">热门</text>
          <text>{{ product.name }}</text>
        </view>
        <view class="specs">
          <text class="spec-item">规格：{{ product.specification }}</text>
        </view>
      </view>

      <!-- 今日参考行情 -->
      <view class="price-info">
        <view class="section-title">今日参考行情</view>
        <view class="price-table">
          <view class="price-row">
            <text>单位/{{ product.unit }}</text>
            <view class="price-cells">
              <view class="price-cell">
                <text>采购价</text>
                <text class="price">¥{{ product.purchasePrice }}</text>
              </view>
              <view class="price-cell">
                <text>{{ product.date }}行情价</text>
                <text class="price">¥{{ product.recoveryPrice }}</text>
              </view>
              <view class="price-cell">
                <text>预计收益</text>
                <text class="profit">¥{{ product.singleProfit }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 历史行情走势 -->
      <view class="history-trend">
        <view class="section-title">历史行情走势</view>
        <view class="chart">
          <view class="price-chart">
            <view class="chart-legend">
              <view class="legend-item">
                <view class="legend-color market"></view>
                <text>行情价</text>
              </view>
              <view class="legend-item">
                <view class="legend-color purchase"></view>
                <text>采购价</text>
              </view>
            </view>
            <view class="chart-container">
              <!-- #ifdef H5 -->
              <div id="priceChart" style="width: 100%; height: 100%;"></div>
              <!-- #endif -->
              <!-- #ifndef H5 -->
              <canvas canvas-id="priceChart" id="priceChart" type="2d"></canvas>
              <!-- #endif -->
            </view>
          </view>
        </view>
      </view>

      <!-- 注意事项和批次号 -->
      <view class="product-info">
        <view class="info-section">
          <view class="section-title">批次号示例</view>
          <view class="batch-info">
            <text class="batch-number">{{ product.batchNo || '暂无批次号' }}</text>
            <text class="batch-tip">*请注意核对商品批次号</text>
          </view>
        </view>
        <view class="info-section">
          <view class="section-title">注意事项</view>
          <view class="precautions-list">
            <view class="precaution-item" v-if="product.precautions">{{ product.precautions }}</view>
            <view class="precaution-item" v-else>暂无注意事项</view>
          </view>
        </view>
   
      </view>

      <!-- 采购渠道 -->
      <view class="purchase-channel">
        <view class="section-title">采购渠道</view>
        <view class="channel-list">
          <view class="channel-item">
            <view class="channel-info">
              <text class="channel-name">团团购</text>
              <text class="channel-desc">正品保障 假一赔十</text>
            </view>
            <button class="channel-btn primary">去拼团</button>
          </view>
          <view class="channel-item">
            <view class="channel-info">
              <text class="channel-name">快团购</text>
              <text class="channel-desc">极速发货 品质无忧</text>
            </view>
            <button class="channel-btn primary">去拼团</button>
          </view>
        </view>
      </view>

      <!-- 交易须知 -->
      <view class="trading-notice">
        <view class="section-title">交易须知</view>
        <view class="notice-list">
          <view class="notice-item"
            >1. 选择商品进行报单，平台将根据报单信息自动匹配收货商家。</view
          >
          <view class="notice-item"
            >2. 报单前请完成实名认证，未满18周岁请勿报单。</view
          >
          <view class="notice-item"
            >3.
            商品到货验通过后，回收商家根据收款账号号信息自行打款。16:00前签收入库的，次日工作时间内回款；16:00后签收的，与次日16:00前签收的一并处理，周二入库的，周三结算打款。节假日等特殊情况另行公告通知。</view
          >
          <view class="notice-item"
            >4.
            报单前请查看确认商家收货及验收要求，务必审慎阅读相关要求，确认无误后提交报单，后续商品查验将以此作为依据。</view
          >
          <view class="notice-item"
            >5.
            商品结算金额以签收入库当日的行情价为准。商品一单入库，将无法召回。</view
          >
          <view class="notice-item">6. 收货信息需与实名认证信息保持一致。</view>
          <view class="notice-item">7. 提交报单即表示同意《交易规则》。</view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn" @click="submitOrder">加入报单表</button>
    </view>
  </base-layout>
</template>
  
  
  
  <script>
import BaseLayout from "@/components/layout/BaseLayout.vue";

import template_page_mixin from "@/libs/mixin/template_page_mixin.js";

import * as echarts from '@/components/echarts-uniapp/echarts.min.js';

export default {
  components: {
    BaseLayout,
  },

  mixins: [template_page_mixin],

  data() {
    return {
      product: {
        title: "",
        mainImage: "",
        images: [],
        weight: "",
        singlePrice: "",
        singleOriginalPrice: "",
        singleProfit: "",
        doublePrice: "",
        doubleOriginalPrice: "",
        doubleProfit: "",
      },
      priceHistory: [],
      chart: null
    };
  },

  computed: {
    productImages() {
      return this.product.mainImage ? [this.product.mainImage, ...(this.product.images || [])] : [];
    }
  },

  onLoad(options) {
    if (options.id) {
      this.fetchProductDetail(options.id);
    }
  },

  methods: {
    async fetchProductDetail(id) {
      try {
        const productRes = await this.$minApi.getProductDetail(id);

        if (productRes.success) {
          const product = productRes.data;
          // 格式化日期
          const formatDate = (dateStr) => {
            if (!dateStr) return '';
            const date = new Date(dateStr);
            return `${date.getMonth() + 1}月${date.getDate()}日`;
          };

          this.product = {
            ...product,
            purchasePrice: product.currentPrice?.purchasePrice || 0,
            date: formatDate(product.currentPrice?.date),
            recoveryPrice: product.currentPrice?.recoveryPrice || 0,
            singleProfit: product.currentPrice?.userProfit || 0,
            doublePrice: ((product.currentPrice?.purchasePrice || 0) * 2).toFixed(2),
            doubleOriginalPrice: ((product.currentPrice?.recoveryPrice || 0) * 2).toFixed(2),
            doubleProfit: ((product.currentPrice?.userProfit || 0) * 2).toFixed(2)
          };
          
          if (product.priceHistory && product.priceHistory.length > 0) {
            this.priceHistory = product.priceHistory;
            this.$nextTick(() => {
              this.initPriceChart();
            });
          }
        }
      } catch (err) {
        console.error('获取数据失败:', err);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },

    initPriceChart() {
      if (!this.priceHistory.length) return;

      const dates = this.priceHistory.map(item => {
        const date = new Date(item.date);
        return `${date.getMonth() + 1}/${date.getDate()}`;
      });
      const recoveryPrices = this.priceHistory.map(item => item.recoveryPrice);
      const purchasePrices = this.priceHistory.map(item => item.purchasePrice);

      // 使用 echarts-uniapp 的方式初始化
      if (this.chart) {
        this.chart.dispose();
      }

      // #ifdef H5
      this.chart = echarts.init(document.getElementById('priceChart'));
      // #endif

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          padding: [10, 15],
          textStyle: {
            color: '#333',
            fontSize: 12
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#ccc',
              width: 1,
              type: 'dashed'
            },
            z: 100
          },
          position: function (point, params, dom, rect, size) {
            // 确保提示框始终在视图内
            const [x, y] = point;
            const obj = { top: y + 20 };
            obj.left = x + 30;
            
            // 处理右侧溢出
            if (obj.left + size.contentSize[0] > size.viewSize[0]) {
              obj.left = x - size.contentSize[0] - 30;
            }
            return obj;
          },
          z: 100,
          extraCssText: 'box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); z-index: 100;',
          formatter: function(params) {
            const date = params[0].name;
            let text = date + '\n\n';
            params.forEach(param => {
              const marker = param.marker;
              const seriesName = param.seriesName;
              const value = param.value;
              text += marker + ' ' + seriesName + '：¥' + value + '\n';
            });
            const recoveryPrice = params.find(item => item.seriesName === '行情价')?.value || 0;
            const purchasePrice = params.find(item => item.seriesName === '采购价')?.value || 0;
            const profit = (recoveryPrice - purchasePrice).toFixed(2);
            text += '\n利润：¥' + profit;
            return text;
          }
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          z: 10
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999',
            fontSize: 12,
            margin: 12
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#F5F5F5',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999',
            fontSize: 12,
            margin: 12,
            formatter: (value) => {
              return '¥' + value;
            }
          }
        },
        series: [
          {
            name: '行情价',
            type: 'line',
            data: recoveryPrices,
            symbolSize: 8,
            symbol: 'circle',
            smooth: true,
            emphasis: {
              focus: 'series',
              scale: true,
              scaleSize: 10,
              z: 50
            },
            itemStyle: {
              color: '#1890ff',
              borderWidth: 2,
              borderColor: '#fff',
              shadowColor: 'rgba(24, 144, 255, 0.3)',
              shadowBlur: 10
            },
            lineStyle: {
              width: 4,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#1890ff'
                }, {
                  offset: 1,
                  color: '#40a9ff'
                }]
              },
              shadowColor: 'rgba(24, 144, 255, 0.2)',
              shadowBlur: 10
            },
            areaStyle: {
              opacity: 0.2,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#1890ff'
                }, {
                  offset: 1,
                  color: '#fff'
                }]
              }
            },
            z: 20
          },
          {
            name: '采购价',
            type: 'line',
            data: purchasePrices,
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            emphasis: {
              focus: 'series',
              scale: true
            },
            itemStyle: {
              color: '#69c0ff',
              borderWidth: 1,
              borderColor: '#fff'
            },
            lineStyle: {
              width: 2,
              type: 'dashed',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#69c0ff'
                }, {
                  offset: 1,
                  color: '#91d5ff'
                }]
              }
            },
            areaStyle: {
              opacity: 0.1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#69c0ff'
                }, {
                  offset: 1,
                  color: '#fff'
                }]
              }
            },
            z: 1
          }
        ]
      };

      this.chart.setOption(option);
    }
  },

  onReady() {
    // 在页面渲染完成后初始化图表
    if (this.priceHistory.length) {
      this.initPriceChart();
    }
  },

  onUnload() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>
  
  
  
  <style lang="scss" scoped>
.product-detail {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}

.content {
  padding: 24rpx;
  background: #f7f8fa;

  & > view {
    position: relative;
    margin-bottom: 32rpx;
    
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -16rpx;
      height: 16rpx;
      background: linear-gradient(180deg, 
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0) 100%
      );
      pointer-events: none;
    }
  }
}

.product-swiper {
  width: 100%;
  height: 480rpx;
  margin: 0 auto 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  background: #f8f9fb;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
      rgba(0, 0, 0, 0.02) 0%, 
      rgba(0, 0, 0, 0.01) 50%, 
      rgba(0, 0, 0, 0.02) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .swiper-item-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fb;
    position: relative;
    padding: 16rpx;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
  }

  :deep(.uni-swiper-dots) {
    z-index: 3;
  }
}

.basic-info,
.price-info,
.history-trend,
.product-info,
.purchase-channel,
.trading-notice {
  background: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(24, 144, 255, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 28rpx;
  color: #333;
  display: flex;
  align-items: center;
  padding-bottom: 16rpx;
  position: relative;

  &::before {
    content: '';
    width: 6rpx;
    height: 32rpx;
    background: #1890ff;
    margin-right: 12rpx;
    border-radius: 3rpx;
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(24, 144, 255, 0.2) 0%,
      rgba(24, 144, 255, 0.1) 50%,
      rgba(24, 144, 255, 0) 100%
    );
  }
}

.price-info {
  .price-table {
    .price-row {
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .price-cells {
      display: flex;
      justify-content: space-between;
      margin-top: 16rpx;
      background: #f8f9fb;
      padding: 24rpx;
      border-radius: 12rpx;
    }

    .price-cell {
      display: flex;
      flex-direction: column;
      align-items: center;

      text {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 8rpx;

        &.price {
          color: #333;
          font-weight: 600;
          font-size: 36rpx;
        }

        &.market-price {
          color: #1890ff;
          font-weight: 600;
          font-size: 36rpx;
        }

        &.profit {
          color: #ff4d4f;
          font-weight: 600;
          font-size: 36rpx;
          &::before {
            content: "+";
          }
        }
      }
    }
  }
}

.history-trend {
  .chart {
    height: 450rpx;
  }

  .chart-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 24rpx;
    gap: 20rpx;

    .tab-item {
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      border-radius: 30rpx;
      background: #f8f9fb;
      color: #666;
      transition: all 0.3s ease;
      position: relative;

      &.active {
        background: linear-gradient(135deg, #40a9ff, #1890ff);
        color: #fff;
        font-weight: 500;
        box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);
      }

      &:hover {
        transform: translateY(-2rpx);
      }
    }
  }
}

.purchase-channel {
  .channel-list {
    .channel-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx;
      border-radius: 12rpx;
      background: #f8f9fb;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .channel-info {
        flex: 1;
        margin-right: 24rpx;

        .channel-name {
          display: block;
          font-size: 30rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 8rpx;
        }

        .channel-desc {
          display: block;
          font-size: 26rpx;
          color: #999;
        }
      }

      .channel-btn {
        min-width: 180rpx;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        border-radius: 36rpx;
        font-size: 28rpx;
        padding: 0;
        margin: 0;

        &.primary {
          background: linear-gradient(135deg, #40a9ff, #1890ff);
          color: #fff;
          box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);

          &:active {
            transform: scale(0.98);
          }
        }
      }
    }
  }
}

.trading-notice {
  .notice-list {
    .notice-item {
      display: flex;
      font-size: 28rpx;
      color: #666;
      line-height: 1.8;
      margin-bottom: 24rpx;
      padding: 20rpx 24rpx;
      position: relative;
      background: #f8f9fb;
      border-radius: 12rpx;
      transition: all 0.3s ease;

      &:hover {
        background: #f0f2f5;
        transform: translateX(4rpx);
      }

      &::before {
        content: '';
        flex-shrink: 0;
        width: 6rpx;
        height: auto;
        background: #1890ff;
        border-radius: 3rpx;
        margin-right: 16rpx;
        align-self: stretch;
      }

      &:last-child {
        margin-bottom: 0;
      }

      &:nth-child(2n) {
        &::before {
          background: #40a9ff;
        }
      }

      &:nth-child(3n) {
        &::before {
          background: #69c0ff;
        }
      }

      &:nth-child(4n) {
        &::before {
          background: #91d5ff;
        }
      }
    }
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 32rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);

  .submit-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: linear-gradient(135deg, #40a9ff, #1890ff);
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.2);

    &:active {
      transform: scale(0.98);
    }
  }
}

.product-info {
  .info-section {
    &:not(:last-child) {
      margin-bottom: 28rpx;
      padding-bottom: 28rpx;
      border-bottom: 1px solid rgba(24, 144, 255, 0.1);
    }
  }

  .precautions-list {
    .precaution-item {
      font-size: 26rpx;
      color: #666;
      line-height: 1.8;
      padding: 16rpx 24rpx;
      background: #f8f9fb;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      position: relative;
      transition: all 0.3s ease;

      &:hover {
        background: #f0f2f5;
        transform: translateX(4rpx);
      }
    }
  }

  .batch-info {
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .batch-number {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      font-family: monospace;
      background: #f8f9fb;
      padding: 20rpx 24rpx;
      border-radius: 12rpx;
      letter-spacing: 2rpx;
      border: 1px dashed rgba(24, 144, 255, 0.2);
    }

    .batch-tip {
      font-size: 24rpx;
      color: #ff4d4f;
      padding-left: 24rpx;
      position: relative;

      &::before {
        content: '*';
        position: absolute;
        left: 8rpx;
        top: 0;
      }
    }
  }
}

.price-chart {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;

  .chart-legend {
    display: flex;
    justify-content: center;
    margin-bottom: 20rpx;

    .legend-item {
      display: flex;
      align-items: center;
      margin: 0 20rpx;

      .legend-color {
        width: 20rpx;
        height: 20rpx;
        border-radius: 4rpx;
        margin-right: 8rpx;

        &.market {
          background: #1890ff;
        }

        &.purchase {
          background: #69c0ff;
        }
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 400rpx;
    canvas {
      width: 100%;
      height: 100%;
    }
  }
}

.basic-info {
  .title {
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: 24rpx;
    line-height: 1.4;
    color: #333;
    padding-bottom: 20rpx;
    border-bottom: 1px solid rgba(24, 144, 255, 0.1);

    .hot-tag {
      background: linear-gradient(135deg, #40a9ff, #1890ff);
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 16rpx;
      border-radius: 6rpx;
      margin-right: 12rpx;
      display: inline-block;
      vertical-align: middle;
      font-weight: normal;
    }
  }

  .specs {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    padding: 16rpx;
    background: #f8f9fb;
    border-radius: 12rpx;

    .spec-item {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      padding-left: 20rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 8rpx;
        background: #1890ff;
        border-radius: 50%;
        opacity: 0.6;
      }
    }

    .weight {
      font-size: 28rpx;
      color: #666;
      padding-left: 20rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 8rpx;
        background: #1890ff;
        border-radius: 50%;
        opacity: 0.6;
      }
    }
  }
}

.product-info {
  .info-section {
    &:not(:last-child) {
      margin-bottom: 28rpx;
      padding-bottom: 28rpx;
      border-bottom: 1px solid rgba(24, 144, 255, 0.1);
    }
  }

  .precautions-list {
    .precaution-item {
      font-size: 26rpx;
      color: #666;
      line-height: 1.8;
      padding: 16rpx 24rpx;
      background: #f8f9fb;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      position: relative;
      transition: all 0.3s ease;

      &:hover {
        background: #f0f2f5;
        transform: translateX(4rpx);
      }
    }
  }

  .batch-info {
    display: flex;
    flex-direction: column;
    gap: 12rpx;

    .batch-number {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
      font-family: monospace;
      background: #f8f9fb;
      padding: 20rpx 24rpx;
      border-radius: 12rpx;
      letter-spacing: 2rpx;
      border: 1px dashed rgba(24, 144, 255, 0.2);
    }

    .batch-tip {
      font-size: 24rpx;
      color: #ff4d4f;
      padding-left: 24rpx;
      position: relative;

      &::before {
        content: '*';
        position: absolute;
        left: 8rpx;
        top: 0;
      }
    }
  }
}
</style> 
  